<template>
  <view class="fixed-search px-4 box-border flex h-12 items-center fixed top-0 z-10 bg-white w-full">
    <picker mode="date" fields="month" class="h-full flex items-center" @change="confirmMonth">
      <view>
        <input v-model="pageQuery.month" style="width: 600rpx;" type="text" placeholder="选择日期" placeholder-class="plcg">
      </view>
    </picker>
    <view class="block mx-auto">
      <image @click="clearMonth" src="@/static/image/close.png" class="w-5 h-5"></image>
    </view>

  </view>

  <!--占位-->
  <view class="h-12"></view>

  <view v-if="total">
    <view class="px-4" v-for="(item, index) in dataList" :key="index">
        <!--明细列表-->
        <view class="py-3 flex justify-between items-center border-bottom">
          <view class="text-rose-600">+{{ item.coin }} 金币</view>
          <view class="text-right">
            <view class="text-sm text-gray-600">-{{ item.price }}元</view>
            <!--item.add_time * 1000-->
            <view class="text-xs text-slate-400">{{ moment(item.add_time * 1000).format('YYYY/MM/DD HH:mm:ss') }}</view>
          </view>
        </view>
    </view>
  </view>

  <view v-else>
    <image class="w-20 h-16 block m-auto mt-14" src="@/static/image/noData.png"></image>
    <view class="mt-2 text-center text-gray-400 text-sm">暂无数据</view>
  </view>
</template>

<script setup lang="ts">
    import { getRechargeMarketCoinListApi } from '@/api/marketing'
    import { ref, onMounted } from "vue";
    import moment from "moment";
    import { onLoad, onReachBottom } from "@dcloudio/uni-app";

    onLoad(() => {
      getRechargeList()
    })

    const pageQuery = ref({
      page: 1,
      limit: 11,
      month: ''
    })
    const total = ref<number>(0)
    const dataList = ref<any[]>([])

    const getRechargeList = async () => {
      const res = await getRechargeMarketCoinListApi(pageQuery.value)
      total.value = res.data.total
      dataList.value = [ ...dataList.value, ...res.data.data]
    }

    /** 选择月份 **/
    const confirmMonth = (event) => {
      pageQuery.value.page = 1
      dataList.value = []
      pageQuery.value.month = event.detail.value
      getRechargeList()
    }

    /** 清除月份 **/
    const clearMonth = () => {
      pageQuery.value.page = 1
      dataList.value = []
      pageQuery.value.month = ''
      getRechargeList()
    }

    /** 滚动底部 **/
    onReachBottom(() => {
      if(dataList.value.length < total.value) {
          pageQuery.value.page += 1;
          getRechargeList()
      }
    })
</script>

<style scoped lang="scss">
.fixed-search {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
</style>
